// 滑块条组件实现
window.add_slider = function(x, y, w, h, min, max, value, step, hide, tag, callback, divid) {
    // 确保参数有默认值
    x = x || 100;
    y = y || 100;
    w = w || 200;
    h = h || 20;
    min = min || 0;
    max = max || 100;
    value = value || 50;
    step = step || 1;
    hide = hide || false;
    tag = tag || '';
    callback = callback || null;
    
    // 生成唯一ID
    const id = 'slider_' + Date.now() + '_' + Math.floor(Math.random() * 10000);
    
    // 创建滑块条容器
    const slider = document.createElement('div');
    slider.id = id;
    
    // 创建滑块条背景
    const bg = document.createElement('div');
    bg.style.position = 'absolute';
    bg.style.width = '100%';
    bg.style.height = '100%';
    bg.style.backgroundColor = '#f5f5f5';
    bg.style.borderRadius = '10px';
    
    // 创建滑块条前景
    const fg = document.createElement('div');
    fg.style.position = 'absolute';
    fg.style.width = `${((value - min) / (max - min)) * 100}%`;
    fg.style.height = '100%';
    fg.style.backgroundColor = '#009688';
    fg.style.borderRadius = '10px';
    
    // 创建滑块按钮
    const thumb = document.createElement('div');
    thumb.style.position = 'absolute';
    thumb.style.width = '20px';
    thumb.style.height = '20px';
    thumb.style.left = `${((value - min) / (max - min)) * (w - 20)}px`;
    thumb.style.top = '-5px';
    thumb.style.backgroundColor = '#ffffff';
    thumb.style.border = '2px solid #009688';
    thumb.style.borderRadius = '50%';
    thumb.style.cursor = 'pointer';
    
    // 组装滑块条
    slider.appendChild(bg);
    slider.appendChild(fg);
    slider.appendChild(thumb);
    
    // 设置样式
    slider.style.position = 'absolute';
    slider.style.left = x + 'px';
    slider.style.top = y + 'px';
    slider.style.width = w + 'px';
    slider.style.height = h + 'px';
    
    // 附加样式和标记
    if (hide) slider.style.display = 'none';
    if (tag) slider.setAttribute('data-tag', tag);
    
    // 事件处理
    let isDragging = false;
    
    const updateSlider = (clientX) => {
        const rect = slider.getBoundingClientRect();
        let newValue = ((clientX - rect.left) / rect.width) * (max - min) + min;
        newValue = Math.max(min, Math.min(max, Math.round(newValue / step) * step));
        
        if (newValue !== value) {
            value = newValue;
            fg.style.width = `${((value - min) / (max - min)) * 100}%`;
            thumb.style.left = `${((value - min) / (max - min)) * (w - 20)}px`;
            
            if (callback) {
                callback(id, value);
            }
            
            handleEvent('slider', id, 7, value.toString(), tag, clientX, 0, null, callback, divid);
        }
    };
    
    thumb.onmousedown = (e) => {
        isDragging = true;
        e.preventDefault();
    };
    
    document.onmousemove = (e) => {
        if (isDragging) {
            updateSlider(e.clientX);
        }
    };
    
    document.onmouseup = () => {
        isDragging = false;
    };
    
    slider.onclick = (e) => {
        updateSlider(e.clientX);
    };
    
    // 添加到页面或指定父div
    const parent = divid ? document.getElementById(divid) : document.body;
    parent.appendChild(slider);
    
    // 初始化sliders存储空间
    if (!elementStore.sliders) {
        elementStore.sliders = {};
    }
    
    // 存储引用
    elementStore.sliders[id] = {
        element: slider,
        bg: bg,
        fg: fg,
        thumb: thumb,
        min: min,
        max: max,
        value: value,
        step: step
    };
    
    return id;
};

window.del_slider = function(id) {
    if (elementStore.sliders[id]) {
        elementStore.sliders[id].element.remove();
        delete elementStore.sliders[id];
    }
};

window.upd_slider = function(id, x, y, w, h, min, max, value, step, hide) {
    const slider = elementStore.sliders[id];
    if (slider) {
        if (x !== undefined) slider.element.style.left = x + 'px';
        if (y !== undefined) slider.element.style.top = y + 'px';
        if (w !== undefined) slider.element.style.width = w + 'px';
        if (h !== undefined) slider.element.style.height = h + 'px';
        if (min !== undefined) slider.min = min;
        if (max !== undefined) slider.max = max;
        if (step !== undefined) slider.step = step;
        if (value !== undefined) slider.value = value;
        
        // 更新滑块位置
        if (min !== undefined || max !== undefined || value !== undefined) {
            const percent = ((slider.value - slider.min) / (slider.max - slider.min)) * 100;
            slider.fg.style.width = `${percent}%`;
            slider.thumb.style.left = `${percent * (slider.element.clientWidth - 20) / 100}px`;
        }
        
        if (hide !== undefined) slider.element.style.display = hide ? 'none' : 'block';
    }
};